<template>
  <div>
    <a-back-top/>
    <div>
      <a-row type="flex" justify="center" align="top">
        <a-col :span="1">
          <a-icon type="environment"></a-icon>
        </a-col>
        <a-col :span="5">
          <h1>玄武区孝陵卫200号南京理工大学</h1>
        </a-col>
        <a-col :span="12"/>
        <a-col :span="6">
          <a-input-search
              :placeholder="searchPlaceHolder"
              enter-button="搜索"
              @search="onSearch"
          />
        </a-col>
      </a-row>
    </div>

    <div style="height: 1vw"/>

    <a-carousel :autoplay="true" arrows>
      <div
          slot="prevArrow"
          slot-scope="props"
          class="custom-slick-arrow"
          style="left: 10px;zIndex: 1"
      >
        <a-icon type="left-circle" />
      </div>
      <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
        <a-icon type="right-circle" />
      </div>
      <div style="background: #fe7773"><h3>美食校园主站楼——6.6元好菜来袭</h3></div>
      <div style="background: #f2ab39"><h3>立享满26减24——“食材新鲜，当天现做”</h3></div>
      <div style="background: #028c6a"><h3>认证享1元开会员——大学生专属</h3></div>
      <div style="background: #1d6a96"><h3>火车站快餐简餐榜——跟吃热门好店</h3></div>
    </a-carousel>

    <div style="height: 1vw"/>

    <div class="food-cate-container">
      <a-row type="flex" :gutter="gutterProp" justify="center">
        <FoodCube name="简餐便当" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-米饭.png" class="food-cate-icon" v-on:click="changeCate('1')" alt="分类1"/>
        </FoodCube>
        <FoodCube name="炸鸡汉堡" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-汉堡包.png" class="food-cate-icon" v-on:click="changeCate('2')" alt="分类2"/>
        </FoodCube>
        <FoodCube name="日韩料理" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-饭团.png" class="food-cate-icon" v-on:click="changeCate('3')" alt="分类3"/>
        </FoodCube>
        <FoodCube name="咖啡奶茶" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-咖啡.png" class="food-cate-icon" v-on:click="changeCate('4')" alt="分类4"/>
        </FoodCube>
        <FoodCube name="甜品甜点" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-布丁.png" class="food-cate-icon" v-on:click="changeCate('5')" alt="分类5"/>
        </FoodCube>
        <FoodCube name="水果蔬菜" :gutter-span="gutterSpan">
          <img src="../assets/CatePics/food-橙子.png" class="food-cate-icon" v-on:click="changeCate('6')" alt="分类6"/>
        </FoodCube>
      </a-row>
    </div>

    <div style="height: 1vw"/>

    <a-menu v-model:selectedKeys="cateMenuCurrent" mode="horizontal">
      <a-menu-item key="all">
        <h3 style="font-weight: bold">全部</h3>
      </a-menu-item>
      <a-menu-item key="1">
        <h3>简餐便当</h3>
      </a-menu-item>
      <a-menu-item key="2">
        <h3>炸鸡汉堡</h3>
      </a-menu-item>
      <a-menu-item key="3">
        <h3>日韩料理</h3>
      </a-menu-item>
      <a-menu-item key="4">
        <h3>咖啡奶茶</h3>
      </a-menu-item>
      <a-menu-item key="5">
        <h3>甜品甜点</h3>
      </a-menu-item>
      <a-menu-item key="6">
        <h3>水果蔬菜</h3>
      </a-menu-item>
    </a-menu>
    <a-skeleton v-if="onlineSellers.length==0&&offlineSellers.length==0" active avatar/>
    <template v-if="onlineSellers.length>0">
      <a-list v-show="onlineSellers!=[]" :bordered="true" :data-source="onlineSellers" :loading="loadingSellers" item-layout="horizontal">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a slot="actions" :href="'/#/menu?sellerID='+item.sellerID">
            {{calcDeliverTime(item.range)}}
            {{calcDistance(item.range)}}
          </a>
          <a :href="'/#/menu?sellerID='+item.sellerID" style="width: 100%">
            <a-list-item-meta>
              <a-avatar :src="item.logo" slot="avatar"/>
              <div slot="title">
                <h3 style="font-weight: bold">{{item.name}}</h3>
              </div>
              <div slot="description">
                {{item.address}}
                <br/>
                <div>免配送费</div>
              </div>
            </a-list-item-meta>
          </a>
        </a-list-item>
      </a-list>
    </template>
    <template v-if="offlineSellers.length>0">
      <div style="height: 1vw"/>
      <a-list :bordered="true" :data-source="offlineSellers" :loading="loadingSellers"
              item-layout="horizontal">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <p slot="actions">
            不在营业时间
            <br/>
            （{{item.businessHour}}）
          </p>
          <a style="width: 100%">
            <a-list-item-meta>
              <a-avatar :src="item.logo" slot="avatar"/>
              <div slot="title">
                <h3>{{item.name}}</h3>
              </div>
              <div slot="description">
                {{item.address}}
              </div>
            </a-list-item-meta>
          </a>
        </a-list-item>
      </a-list>
    </template>


  </div>
</template>

<script>
import FoodCube from "@/components/FoodCube";
import {notification} from "ant-design-vue";
export default {
  name: "Home",
  data:function (){
    return {
      searchPlaceHolder:"黄焖鸡",
      searchRecommends:["奥利给","扒鸭屁股","老八秘制小汉堡","臭豆腐","腐乳","柠檬","鞭炮","牛B","米肠","蒜","老干妈","午饭"],
      gutterProp:{xs: 8, sm: 16, md: 24,lg: 36},
      gutterSpan:'3',
      cateMenuCurrent:[],
      loadingSellers:true,
      sellerData:[],
      searchText:''
    }
  },
  computed:{
    onlineSellers:function (){
      let tmp=[]
      this.sellerData.forEach((item)=>{
        if(this.isOnline(item.businessHour)){
          tmp.push(item)
        }
      })
      return tmp
    },
    offlineSellers:function (){
      let tmp=[]
      this.sellerData.forEach((item)=>{
        if(!this.isOnline(item.businessHour)){
          tmp.push(item)
        }
      })
      return tmp
    }
  },
  methods:{
    onSearch:function (searchText){
      //处理搜索推荐相关
      if(searchText==undefined||searchText=='') searchText=this.searchPlaceHolder
      this.searchPlaceHolder=this.searchRecommends[this.randomNum(0,this.searchRecommends.length-1)]
      this.searchRecommends.push(searchText)

      this.searchText=searchText
      this.cateMenuCurrent=['searchPrep']
      this.cateMenuCurrent=['search'] //此处会触发watch此变量的工厂函数，由此函数处理搜索
    },
    isOnline:function (bTime){
      let date=new Date()
      let times=[]
      times[0]=date.getHours()
      times[1]=date.getMinutes()
      times[2]=parseInt(bTime.split("-")[0].split(":")[0])
      times[3]=parseInt(bTime.split("-")[0].split(":")[1])
      times[4]=parseInt(bTime.split("-")[1].split(":")[0])
      times[5]=parseInt(bTime.split("-")[1].split(":")[1])

      //如果商家出售宵夜则将最晚送达时间.小时拓展
      if(times[2]>times[4]) {
        //如果当前时间已过零点则将当前时间加24
        if(0<=times[0]&&times[0]<times[4]) times[0]+=24
        times[4]+=24
      }
      return (times[2]*60+times[3]<=times[0]*60+times[1] && times[0]*60+times[1]<times[4]*60+times[5])
    },
    //生成从minNum到maxNum的随机数
    randomNum:function (minNum,maxNum){
      switch(arguments.length){
        case 1:
          return parseInt((Math.random()*minNum+1).toString(),10);
          break;
        case 2:
          return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
          break;
        default:
          return 0;
          break;
      }
    },
    changeCate:function (name){
      this.cateMenuCurrent=[name]
    },
    calcDeliverTime:function (distance){
      if(distance<1000) return '30分钟'
      else{
        let time=((distance-1000)*(1/600)+30).toFixed(0)
        if(time<60) return time.toString()+'分钟'
        else{
          return (time/60).toFixed(0).toString()+'小时'
        }
      }
    },
    calcDistance:function (distance){
      if(distance>999) {
        return (distance/1000).toFixed(1).toString()+'km'
      }else return distance.toString()+'m'
    }
  },
  components:{
    FoodCube
  },
  created:function() {
    this.cateMenuCurrent=['all']
  },
  watch:{
    cateMenuCurrent:function (){
      if(this.cateMenuCurrent[0]=='searchPrep') return

      //持有方法执行时的当前分类，以解决异步Push到非本类数组的问题
      let currentCate=this.cateMenuCurrent;

      //处理分类请求和搜索请求
      let api='/sellerlist'
      let reqData={
        class:this.cateMenuCurrent
      }
      if(this.cateMenuCurrent[0]=='search') {
        //console.log("触发搜索")
        api = '/search'
        reqData={
          searchText:this.searchText
        }
      }

      this.sellerData=[]
      this.loadingSellers=true
      let rearUrl = this.$store.state.rear_url;
      this.$axios.post('http://'+rearUrl+api,reqData)
      .then((res)=>{
        if(res.data.sellerListStatus!==0) {
          if(this.cateMenuCurrent[0]=='search'){
            this.timeToShowList=true
            return
          }
          notification.open({
            message: '请求错误',
            description: '服务器返回了状态码：' + res.data.sellerListStatus
          })
        }else {
          res.data.sellerList.forEach((idi)=>{
            this.$axios.post('http://'+rearUrl+'/sellerinfo',{
              sellerID:idi
            })
            .then((response)=>{
              if(response.data.sellerInfoStatus!==0){
                console.log("请求商家信息时服务器返回了状态码1")
              }else{
                //如果用户仍在浏览当前分类则将其推入数组中
                if(currentCate==this.cateMenuCurrent) {
                  this.sellerData.push(response.data)
                  this.loadingSellers=false
                }
              }
            }).catch((err)=>{
              notification.open({
                message:'请求商家信息失败',
                description:"服务器错误："+err.message
              })
            })
          })
        }
      }).catch((err)=>{
        this.loadingSellers=false
        notification.open({
          message:'请求商家ID列表失败',
          description:"服务器错误："+err.message
        })
      })
    }
  }

}
</script>

<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.food-cate-container{
  width: 100%;
  height: 10vw;
}
.food-cate-icon{
  width: 5vw;
  height: 5vw;
  cursor: pointer;
}
</style>